import React from 'react';
import { motion } from 'framer-motion';

const About: React.FC = () => {
  return (
    <div className="py-24 bg-gradient-to-b from-gray-50 to-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-20">
          <motion.h2 
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-5xl font-bold text-gray-900"
          >
            About Us
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-6 text-2xl text-gray-600"
          >
            Learn about the team and mission behind RoomAI
          </motion.p>
        </div>
        
        {/* Team Section */}
        <div className="mb-20">
          <motion.h3 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="text-3xl font-bold text-gray-900 mb-8 text-center"
          >
            Our Team
          </motion.h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              {
                name: "Michael Zhang",
                role: "Founder & CEO",
                bio: "With 10 years of experience in AI and computer vision, previously at Google and Microsoft, Michael founded RoomAI to make professional interior design accessible to everyone.",
                image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              },
              {
                name: "Sarah Li",
                role: "CTO",
                bio: "Machine learning expert with a PhD in Computer Science from Stanford. Sarah leads the core algorithm development at RoomAI, focusing on improving the quality and efficiency of AI-generated designs.",
                image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              },
              {
                name: "Emily Wang",
                role: "Design Director",
                bio: "Seasoned interior designer with 15 years of industry experience. Emily ensures that AI-generated designs meet professional standards and provides design expertise for algorithm training.",
                image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              }
            ].map((member, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.2 }}
                className="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow"
              >
                <div className="flex flex-col items-center mb-6">
                  <div className="w-32 h-32 rounded-full mb-4 overflow-hidden bg-gradient-to-r from-blue-500 to-purple-600 p-1">
                    <img
                      src={member.image}
                      alt={member.name}
                      className="w-full h-full rounded-full object-cover"
                    />
                  </div>
                  <h3 className="text-2xl font-semibold text-gray-900">{member.name}</h3>
                  <p className="text-lg text-blue-600">{member.role}</p>
                </div>
                <p className="text-lg text-gray-600 text-center">{member.bio}</p>
              </motion.div>
            ))}
          </div>
        </div>
        
        {/* Mission Section */}
        <div className="mb-20">
          <motion.h3 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="text-3xl font-bold text-gray-900 mb-8 text-center"
          >
            Our Mission
          </motion.h3>
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            className="bg-white p-10 rounded-xl shadow-sm"
          >
            <div className="relative">
              <div className="absolute -left-4 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full"></div>
              <p className="text-xl text-gray-700 leading-relaxed">
                RoomAI's mission is to democratize interior design through artificial intelligence, making high-quality design services accessible and affordable for everyone. We believe that everyone deserves a beautiful, comfortable living space without having to pay premium prices or spend countless hours planning.
                <br /><br />
                By combining cutting-edge AI technology with professional design expertise, we're creating a platform where users can simply upload a photo and see their space transformed in different design styles, helping them make more informed decisions about their home renovations.
                <br /><br />
                Our goal is to continuously innovate, enhance user experience, and establish RoomAI as the global leader in AI interior design solutions.
              </p>
            </div>
          </motion.div>
        </div>
        
        {/* Company History */}
        <div>
          <motion.h3 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="text-3xl font-bold text-gray-900 mb-8 text-center"
          >
            Our Journey
          </motion.h3>
          <div className="space-y-12 relative">
            <div className="absolute left-12 top-0 bottom-0 w-0.5 bg-gray-200"></div>
            {[
              {
                year: "2021",
                title: "The Beginning",
                description: "RoomAI was founded in 2021 by Michael Zhang, initially as a small research project exploring the possibilities of AI in interior design."
              },
              {
                year: "2022",
                title: "Technical Breakthrough",
                description: "The team achieved major breakthroughs in Generative Adversarial Networks (GANs) and diffusion models, significantly improving the quality and realism of AI-generated interior designs."
              },
              {
                year: "2023",
                title: "Product Launch",
                description: "RoomAI officially launched its first version to the public, gaining widespread attention and positive feedback, with user numbers quickly growing to 1 million."
              },
              {
                year: "2024",
                title: "Ongoing Growth",
                description: "Today, RoomAI has over 2 million users and continues to expand its product features and enhance its AI design capabilities to create more value for users."
              }
            ].map((milestone, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: index * 0.2 }}
                className="flex relative z-10"
              >
                <div className="flex-shrink-0 w-24 text-center">
                  <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-lg font-bold text-xl shadow-md">
                    {milestone.year}
                  </div>
                </div>
                <div className="ml-8 flex-grow">
                  <div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <h4 className="text-2xl font-semibold text-gray-900 mb-2">{milestone.title}</h4>
                    <p className="text-lg text-gray-600">{milestone.description}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;


